<template>
  <card-box title="用户趋势" is-long-header>
    <div slot="header">
      <div class="selector">
        <a href="javascript:;" @click="select(item)" class="item" :class="{ 'item-on': item.value === curValue }"
          v-for="(item, index) in options" :key="index">{{ item.name }}</a>
      </div>
    </div>
    <div class="user-info">
      <div class="chart" ref="chart"></div>
    </div>
  </card-box>
</template>
<script>
import CommonMixin from '../mixin/CommonMixin';
import CardBox from './common/CardBox.vue';
import * as echarts from 'echarts'
export default {
  mixins: [CommonMixin],
  data() {
    return {
      loading: false,
      code: 'USER',
      curValue: 1,
      options: [
        { name: '近7天', value: 1 },
        { name: '近30天', value: 2 },
        // { name: '近1年', value: 3 }
      ],
      myChart: null,
      list: []

    }
  },
  computed: {
    seriesData() {
      const { list, curValue } = this
      if(!list || list.length === 0) return list;
      if(curValue === 1) return list.slice(-7)
      if(curValue === 2) return list.slice(-30)
      if(curValue === 3) return list.slice(-30)
    },
    xAxisData() {
      const { curValue } = this
      const date = new Date()
      const today = date.getTime()
      const oneDay = 86400000
      const month = date.getMonth()
      const year = date.getFullYear()
      if (curValue === 1) return new Array(7).fill(0).map((item, index) => {
        const d = today - index * oneDay
        return { name: this.dateFormat('mm-dd', d), value: d }
      })
      if (curValue === 2) return new Array(30).fill(0).map((item, index) => {
        const d = today - index * oneDay
        return { name: this.dateFormat('mm-dd', d), value: d }
      })
      if (curValue === 3) return new Array(12).fill(0).map((item, index) => {
        let m = month - index
        if (m < 1) m = 12
        let y = year
        if (m > month) y = year - 1
        const ds = new Date(y, m, 1)
        const de = new Date(y, m, 0)
        return { name: this.dateFormat('yyyy-mm', ds), value: ds, ds, de }
      })
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    select(item) {
      this.curValue = item.value
      this.init()
    },
    renderChart() {   
      this.$nextTick(() => {
        if (this.myChart) this.myChart.dispose()
        const chart = this.$refs.chart;
        this.myChart = echarts.init(chart)
        window.addEventListener('resize', this.myChart.resize)
        const options = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            itemWidth: 8,
            itemHeight: 8,
            textStyle: {
              color: '#ffffff'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.seriesData.map(item => item.day),
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: { color: '#ffffff' },
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '单位：次',
              nameTextStyle: {
                color: '#ffffff'
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: 'rgba(230, 247, 255, 0.2)'
                }
              },
              axisLabel: { color: '#ffffff' }
            },
            {
              type: 'value',
              name: '单位：%',
              nameTextStyle: {
                color: '#ffffff'
              },
              splitLine: {
                show: false,
                lineStyle: {
                  type: 'dashed',
                  color: 'rgba(230, 247, 255, 0.2)'
                }
              },
              axisLabel: { color: '#ffffff' }
            }
          ],
          series: [
            {
              name: '登录频率',
              type: 'bar',
              barWidth: 16,
              showBackground: true,
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' 次';
                }
              },
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(54, 235, 202, 1)'
                }, {
                  offset: 1,
                  color: 'rgba(24, 130, 255, 1)'
                }]
              ),
              data: this.seriesData.map(item => item.login_number)
            },
            {
              name: '活跃度(留存率)',
              type: 'line',
              yAxisIndex: 1,
              color: 'rgba(255, 209, 92, 1)',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' %';
                }
              },
              data: this.seriesData.map(item => parseInt((item.active_number/item.total_count * 100)))
            }
          ]
        };

        this.myChart.setOption(options)
      })
    },
    async init() {
      this.loading = true
      const res = await this.queryData(this.code)
      this.loading = false
      const dataResult = res.data.dataResult
      const list = dataResult.sort((a, b) => new Date(a.day).getTime() - new Date(b.day).getTime())
      // console.log('用户趋势：', list)
      this.list = list
      this.renderChart()
    }
  }
}
</script>
<style lang="scss" scoped>
.selector {
  display: flex;
  align-items: center;

  .item {
    width: tvw(50);
    height: tvh(20);
    font-size: tvw(12);
    color: #ffffff;
    text-align: center;
    line-height: tvh(20);
    margin-right: tvw(16);
    background: url(~@/assets/images/yyzhkb/kb-select-item-no-bg.svg) center center no-repeat;
    background-size: contain;
    transition: all .12s;
  }

  .item:hover {
    background: url(~@/assets/images/yyzhkb/kb-select-item-on-bg.svg) center center no-repeat;
    background-size: contain;
  }

  .item-on {
    background: url(~@/assets/images/yyzhkb/kb-select-item-on-bg.svg) center center no-repeat;
    background-size: contain;
  }
}

.user-info {
  height: tvh(175);

  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>